<template>
<div id="devGraphChosserContainer">
  <el-row :gutter="20">
  <el-col :span="groupSpan">
    <template>
      <el-input v-model="groupKey" placeholder="请输入关键字" size='small' icon="search" @change="groupKeyChangeAction"></el-input>

     <el-table
       :data="groupData"
       @selection-change="handleGroupSelectionChange"
      height="400">
       <el-table-column
        type="selection">
      </el-table-column>
       <el-table-column
         prop="name"
         show-overflow-tooltip
         label="分组"
        >
       </el-table-column>
     </el-table>
   </template>
 </el-col>
  <el-col :span="devSpan">
    <template>
      <el-input v-model="devKey" placeholder="请输入关键字" size='small' icon="search" @change="devKeyChangeAction"></el-input>
       <el-table
         :data="devData"
         height="400"
         @selection-change="handleDevSelectionChange">
         <el-table-column
          type="selection"
          >
        </el-table-column>
         <el-table-column
           prop="name"
           label="设备"
           show-overflow-tooltip
           >
         </el-table-column>
       </el-table>
     </template>
  </el-col>
  <el-col v-if="graphsShow" :span="10">
    <template>
      <el-input v-model="graphKey" placeholder="请输入关键字" size='small' icon="search" @change="graphKeyChangeAction"></el-input>
       <el-table
        @selection-change="graphsSelectionChange"
        :data="graphData"
        height="400">
         <el-table-column
          type="selection">
        </el-table-column>
         <el-table-column
           prop="name"
           label="图形"
           show-overflow-tooltip
           >
         </el-table-column>
       </el-table>
     </template>
  </el-col>
</el-row>
</div>
</template>

<script>
import api from 'api/device'



export default {
    props:{
      graphsShow: {
            type: Boolean,
            default: function() {
              return false;
            }
      }
    },
    data: function() {

        return {
          groupData: [],
          devData:[],
          graphData:[],
          base_groupData: [],
          base_devData:[],
          base_graphData:[],
          selectGraphs:[],
          selectDevs:[],

          groupKey:'',
          devKey:'',
          graphKey:'',
          groupSpan:this.graphsShow?6:10,
          devSpan:this.graphsShow?8:14,
        };
    },
    methods: {
      handleGroupSelectionChange(val){
        if(val.length>0){
          var groupIds = "";
          for(var i=0;i<val.length;i++){
            if(i>0){
              groupIds=groupIds+",";
            }
            groupIds=groupIds+val[i].id;
          }
          api.queryHostByGroupid(groupIds).then((response) => {
            this.devData = response.data;
            this.base_devData = response.data;
          }).catch((err) =>{
              console.error(err);
          });
        }else{
          this.devData = [];
        }
      },
      handleDevSelectionChange(val){
        if(this.graphsShow){
          if(val.length>0){
            var devIds = "";
            for(var i=0;i<val.length;i++){
              if(i>0){
                devIds=devIds+",";
              }
              devIds=devIds+val[i].id;
            }
            api.queryGraphByHostid(devIds).then((response) => {
              this.graphData = response.data;
              this.base_graphData = response.data;
            }).catch((err) =>{
                console.error(err);
            });
          }else{
            this.graphData = [];
          }
        }else{
          this.selectDevs = val;

        }

      },
      graphsSelectionChange(val){
        this.selectGraphs = val;
      },
      groupKeyChangeAction() {
        var filterData = [];
        var self = this;
        if (this.groupKey == '') {
          this.groupData = this.base_groupData;
        } else {
          this.groupData = this.base_groupData.filter(function(v) {
            if ((""+v["name"]+"").toLowerCase().indexOf(self.groupKey.toLowerCase())>=0) {
              return true;
            }
            return false;
          });
        }
      },
      devKeyChangeAction() {
        var filterData = [];
        var self = this;
        if (this.devKey == '') {
          this.devData = this.base_devData;
        } else {
          this.devData = this.base_devData.filter(function(v) {
            if ((""+v["name"]+"").toLowerCase().indexOf(self.devKey.toLowerCase())>=0) {
              return true;
            }
            return false;
          });
        }
      },
      graphKeyChangeAction() {
        var filterData = [];
        var self = this;
        if (this.graphKey == '') {
          this.graphData = this.base_graphData;
        } else {
          this.graphData = this.base_graphData.filter(function(v) {
            if ((""+v["name"]+"").toLowerCase().indexOf(self.graphKey.toLowerCase())>=0) {
              return true;
            }else{
              return false;
            }
          });
        }
      }
    },
    mounted: function() {
      api.listHostgroup().then((response) => {
        this.groupData = response.data;
        this.base_groupData = response.data;
      }).catch((err) =>{
          console.error(err);
      });
    }
}
</script>


<style >
#devGraphChosserContainer .el-table td, #devGraphChosserContainer .el-table th.is-leaf{
  padding: 0;
}
</style>
